<template>
    <!--我的订单-->
    <div class="orders">
        <div class="title clearfix">
            继续教育
            <router-link to="/zhengming">
                <Button size="large" class="pull-right">学习证明</Button>
            </router-link>
        </div>
        <p class="class"><img src="../../assets/icon.png" alt="">《{{detailHeader.certificateName}}》</p>
        <ul class="date">
            <li><p>发证时间： <span>{{detailHeader.awardTime}}</span></p>有效期：<span> {{detailHeader.validity}}</span></li>
            <li>目标学时：<span>{{detailHeader.tagetPeriod}}学时</span></li>
            <li><p>获得课程学时：<span>{{detailHeader.userperiod}}学时 </span></p>获得活动学时：<span> {{detailHeader.activePeriod}}学时</span></li>
        </ul>
        <div class="divider"></div>
        <Tabs value="name1">
            <TabPane label="课程学时" name="name1">
                <ul class="list">
                    <li class="clearfix" v-for="detail in detailList">
                        <img :src="detail.courseImage" alt="" width="164" height="90" class="pull-left" v-on:click="getCourse(detail.id)">
                        <div class="pull-left" v-on:click="getCourse(detail.id)">
                            <p class="titles">{{detail.courseTitle}}</p>
                            <p class="time"><span class="xueshi">{{detail.period}}学时</span></p>
                        </div>
                    </li>
                </ul>
            </TabPane>
            <TabPane label="活动学时" name="name2">
                <!--为空时-->
                <div class="null" v-show="isActivity2">
                    <Button icon="ios-add-circle-outline" class="add" v-on:click="showActivity()">添加活动学时</Button>
                    <ul>
                        <li>1.至多参加6场线下活动培训，每场活动最多可获得{{detailHeader.offlinePeriod}}学时；</li>
                        <li>2.请在参加活动时，填写活动学时内容。</li>
                    </ul>
                </div>
                <!--新增-->
                <Form :label-width="86" label-position="left" class="formMin" v-show="activity" ref="form"  :model="form" :rules="formValidate">
                    <a class="question" v-on:click="showService()"><img src="../../assets/daochu.png" alt=""> 说明</a>
                    <FormItem label="活动名称" prop="activityName">
                        <Input v-model="form.activityName" size="large" placeholder="请输入活动名称" style="width: 80%;"/>
                    </FormItem>
                    <FormItem label="举办机构" prop="sponsor">
                        <Select v-model="form.sponsor" placeholder="请选择" size="large" style="width: 245px">
                            <Option :value="item.name" v-for="item in dicDataList">{{item.name}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="活动时间" prop="activityTime">
                        <DatePicker class="dateRight" :value="activityTimeAll" @on-change="beginChange" type="daterange" placeholder="请选择开始时间" style="width: 245px" size="large"></DatePicker>
                    </FormItem>
                    <FormItem label="活动照片">
                        <Upload class="uplaod"
                            ref="userImg"
                            :format="['jpg','jpeg','png']"
                            :headers="{Authorization:token}"
                            :show-upload-list="false"
                            action="http://localhost:9555/base/file/upload"
                            :max-size="3072"
                            :on-exceeded-size="handleMaxSize"
                            :on-success="uploadSuccess1"
                            :on-format-error="formatError">
                            <img src="../../assets/upload.png" v-if="userImgFlag" alt="" style="height: 60px;">
                            <img class="uploadImg" :src="infoImg1" v-else alt="">
                            <p>请上传个人照片</p>
                        </Upload>
                        <Upload class="uplaod"
                            ref="signImg"
                            :format="['jpg','jpeg','png']"
                            :headers="{Authorization:token}"
                            :show-upload-list="false"
                            action="http://localhost:9555/base/file/upload"
                            :max-size="3072"
                            :on-exceeded-size="handleMaxSize"
                            :on-success="uploadSuccess2"
                            :on-format-error="formatError">
                            <img src="../../assets/upload.png" v-if="signImgFlag" alt="" style="height: 60px;">
                            <img class="uploadImg" :src="infoImg2" v-else alt="">
                            <p>请上传个人签到照片</p>
                        </Upload>
                        <Upload class="uplaod"
                            ref="activityImg"
                            :format="['jpg','jpeg','png']"
                            :headers="{Authorization:token}"
                            :show-upload-list="false"
                            action="http://localhost:9555/base/file/upload"
                            :max-size="3072"
                            :on-exceeded-size="handleMaxSize"
                            :on-success="uploadSuccess3"
                            :on-format-error="formatError">
                            <img src="../../assets/upload.png" v-if="activityImgFlag" alt="" style="height: 60px;">
                            <img class="uploadImg" :src="infoImg3" v-else alt="">
                            <p>请上传个人活动现场照片</p>
                        </Upload>
                    </FormItem>
                    <FormItem>
                        <Button class="add" v-on:click="addActivity()">提交审核</Button>
                        <ul class="addul">
                            <li>1.至多参加6场线下活动培训，每场活动最多可获得{{detailHeader.offlinePeriod}}学时；</li>
                            <li>2.请在参加活动时，填写活动学时内容。</li>
                        </ul>
                    </FormItem>
                </Form>
                <!--列表-->
                <div v-show="isActivity">
                    <ul class="lists">
                        <li v-for="item in activeys">
                            <ul>
                                <li>
                                    <span>审核状态：</span>
                                    <span style="color: red" v-if="item.activityType == 0">未通过</span>
                                    <span style="color: green" v-if="item.activityType == 1">已通过</span>
                                    <span style="color: blue" v-if="item.activityType == 2">审核中</span>
                                </li>
                                <li>
                                    <span>活动时间：</span>{{item.activityTime}} 至 {{item.activityendTime}}
                                </li>
                                <li>
                                    <span>活动名称：</span>{{item.activityName}}
                                </li>
                                <li>
                                    <span>举办机构：</span>{{item.sponsor}}
                                </li>
                                <!--<li>
                                    <span>签到地点：</span>{{item.activityAddress}}
                                </li>-->
                            </ul>
                        </li>
                    </ul>
                    <div class="add_wrap" v-if="activeys.length > 0">
                        <Button icon="ios-add-circle-outline" class="add" v-on:click="showActivity()">添加活动学时</Button>
                        <ul>
                            <li>1.至多参加6场线下活动培训，每场活动最多可获得{{detailHeader.offlinePeriod}}学时；</li>
                            <li>2.请在参加活动时，填写活动学时内容。</li>
                        </ul>
                    </div>
                </div>
            </TabPane>
        </Tabs>
        <Modal v-model="modal" width="580" class-name="vertical-center-modal">
            <p slot="header" class="header">说明</p>
            <div class="notice" v-html="examinationDetail">
                {{examinationDetail}}
            </div>
            <div slot="footer" style="text-align: center">
                <a href="javascript:;" v-on:click="showService()" class="read">我已阅读 {{timeSent}}</a>
            </div>
        </Modal>
    </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
    .uploadImg{
        height: 60px;
    }
    .title {
        font-size: 20px;
        color: #000;
        border-bottom: 1px solid #E7E7E7;
        padding-bottom: 20px;
        margin-bottom: 20px;

        button {
            color: #B2936B;
            border: 1px solid #B2936B;
        }
    }

    .class {
        font-size: 18px;
        color: #000;
        margin-bottom: 10px;

        img {
            vertical-align: middle;
        }
    }

    .date {
        font-size: 14px;
        color: #000;
        line-height: 25px;

        p {
            display: inline-block;
            width: 200px;
        }

        span {
            color: #666;

        }
    }

    .divider {
        background-color: #f5f5f5;
        height: 25px;
        margin: 20px -25px 0;
    }

    .list {
        li {
            margin-top: 40px;

            img {
                margin-right: 20px;
                border-radius: 5px;
            }
        }

        .titles {
            font-size: 14px;
            color: #000;
            margin-bottom: 20px;
        }

        .time {
            font-size: 14px;
            color: #999;

            .label {
                color: #333;
            }
        }
    }

    .add {
        background-color: #B2936B;
        color: #fff;
        height: 50px;
        width: 200px;
        font-size: 16px;
        margin-bottom: 40px;
    }

    .null {
        padding: 160px 215px;
    }

    .add_wrap {
        padding: 50px 215px 0;
    }

    .null li, .addul li, .add_wrap li {
        font-size: 14px;
        color: #666;
        line-height: 25px;
    }

    .formMin {
        padding-top: 40px;
        position: relative;
    }

    .uplaod {
        display: inline-block;
        text-align: center;
        font-size: 14px;
        color: #999;
        margin-right: 30px;
    }

    .question {
        position: absolute;
        right: 0;
        top: 40px;
        font-size: 16px;
        color: #666;
        z-index: 99;
        img {
            vertical-align: bottom;
        }
    }

    .header {
        font-size: 23px;
        color: #333;
        text-align: center;
        font-weight: 700;
        height: 30px;
        line-height: 30px;
    }

    .notice {
        font-size: 16px;
        color: #666;
    }

    .read {
        background-color: #B2936B;
        color: #fff;
        display: inline-block;
        width: 150px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 5px;
        font-size: 18px;
    }

    .lists {
        > li {
            border-bottom: 1px dashed #DBDBDB;
            font-size: 14px;
            color: #666;
            line-height: 25px;
            padding: 20px 0;

            span {
                color: #000;
            }
        }
    }
</style>
<script type="text/ecmascript-6">
    import {keepStudy, activeyList, getHtmlWeb, getDicList, addActivity} from '../../http'
    import {getStore} from '../../storage'
    export default {
        name: 'continuedetail',
        props: {},
        data() {
            return {
                userImgFlag: true,
                signImgFlag: true,
                activityImgFlag: true,
                infoImg1: "../../assets/upload.png",
                infoImg2: "../../assets/upload.png",
                infoImg3: "../../assets/upload.png",
                token:getStore('token'),
                dicDataList: [],
                timeSent: '(10s)',
                isActivity: true,
                isActivity2: false,
                modal: false,
                activity: false,
                examinationDetail: '',
                detailList: [],
                activeys: [],
                detailHeader: {},
                usercertificateId: this.$route.query.usercertificateId,
                timer: '',
                userImg: '',//个人照片
                signImg: '',//签到照片
                activityImg: '',//活动照片
                activityTimeAll: [],
                form: {
                    usercertificateId: this.$route.query.usercertificateId,
                    activityName: '',//活动名称
                    activityType: 2,//活动状态
                    activityendTime: '',//活动结束时间
                    activityTime: '',//活动时间
                    sponsor: '',//主办方
                    activityImgs: ''//活动图片
                },
                formValidate: {
                    activityName: [{required: true, message: "活动名称不能为空", trigger: "blur"}],
                    sponsor: [{required: true, message: "主办方不能为空", trigger: "blur"}],
                    activityTime: [{required: true, message: "活动开始时间不能为空", trigger: "blur"}],
                    activityendTime: [{required: true, message: "活动结束时间不能为空", trigger: "blur"}],
                },
            };
        },
        methods: {
            getInfo(){
                keepStudy({usercertificateId: this.usercertificateId}).then(res => {
                    if(res.code === 200) {
                        this.detailList = res.data.course_List;
                        console.info(this.detailList)
                        this.detailHeader = res.data.courseList[0]
                        if(this.detailHeader.userperiod == ""){
                            this.detailHeader.userperiod = 0
                        }
                        if(this.detailHeader.sumperiod == ""){
                            this.detailHeader.sumperiod = 0
                        }
                        if(this.detailHeader.isFull == 1){
                            this.detailHeader.activePeriod = this.detailHeader.sumperiod - this.detailHeader.userperiod
                        }else{
                            this.detailHeader.activePeriod = this.detailHeader.sumperiod
                        }
                    }
                })
                activeyList({usercertificateId: this.usercertificateId}).then(res => {
                    if(res.code === 200) {
                        this.activeys = res.data;
                        if(this.activeys.length < 1){
                            this.isActivity = false
                            this.isActivity2 = true
                        }else{
                            this.isActivity2 = false
                            this.isActivity = true
                        }
                        this.activityTimeAll = [res.data.activityTime, res.data.activityendTime]
                    }
                })
            },
            //获取说明内容
            getService(){
                getHtmlWeb({type: 'hdxs'}).then(res => {
                    this.examinationDetail = res.data.html.htmlContent;
                })
            },
            //获取说明内容
            getDicList(){
                let that = this
                getDicList({dicType: 'jbtrain'}).then(res => {
                    that.dicDataList = res.data
                    that.form.sponsor = res.data[0].code
                })
            },
            //说明
            showService(){
                if(this.modal){
                    this.modal = false
                    return
                }
                if(this.timer != ''){
                    clearInterval(this.timer);
                }
                this.timeSent = '(10s)'
                let that = this
                this.modal = true
                var allTime = 10;
                function timeGo() {
                    allTime -= 1;
                    if (allTime == 0 || allTime < 0) {
                        clearInterval(that.timer);
                        that.timeSent = ''
                        that.modal = false
                    } else {
                        that.timeSent = '(' + allTime + 's)'
                    }
                }
                this.timer = setInterval(timeGo, 1000)
            },
            showActivity(){
                this.getService()
                this.activity = true
                this.isActivity = false
                this.isActivity2 = false
                this.getDicList()
            },
            //上传活动
            addActivity(){
                let that = this
                this.$refs.form.validate(valid => {
                    if(that.userImg == ''){
                        that.$Notice.warning({
                            title: '添加活动失败',
                            desc: '请上传个人照片'
                        });
                        return;
                    }
                    if(that.signImg == ''){
                        that.$Notice.warning({
                            title: '添加活动失败',
                            desc: '请上传个人签到照片'
                        });
                        return;
                    }
                    if(that.activityImg == ''){
                        that.$Notice.warning({
                            title: '添加活动失败',
                            desc: '请上传活动照片'
                        });
                        return;
                    }
                    if (valid) {
                        that.form.activityImgs = that.userImg + ',' + that.signImg + ',' + that.activityImg
                        addActivity(that.form).then(res => {
                            if(res.code == 200){
                                that.activity = false
                                activeyList({usercertificateId: that.usercertificateId}).then(res => {
                                    if(res.code === 200) {
                                        that.activeys = res.data;
                                        if(that.activeys.length < 1){
                                            that.isActivity = false
                                            that.isActivity2 = true
                                        }else{
                                            that.isActivity2 = false
                                            that.isActivity = true
                                        }
                                    }
                                })
                            }
                        })
                    }
                });
            },
            //开始时间
            beginChange(v){
                this.form.activityTime = v[0]
                this.form.activityendTime = v[1]
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '证件上传失败',
                    desc: '您上传的图片超过3M，无法上传。'
                });
            },
            //格式错误提醒
            formatError(){
                this.$Notice.warning({
                    title:"证件上传失败",
                    desc:"图片格式错误，请上传图片",
                    duration: 3,
                });
            },
            //上传个人图片
            uploadSuccess1(response){
                if(response.code === 200){
                    this.userImg = response.data.fileUrl
                    this.infoImg1 = response.data.fileUrl
                    this.userImgFlag = false
                }else{
                    this.$Notice.warning({
                        title:'证件上传失败',
                        desc:'上传不成功，请重新上传',
                        duration: 3,
                    });
                }
            },
            //上传签到图片
            uploadSuccess2(response){
                if(response.code === 200){
                    this.signImg = response.data.fileUrl
                    this.infoImg2 = response.data.fileUrl
                    this.signImgFlag = false
                }else{
                    this.$Notice.warning({
                        title:'证件上传失败',
                        desc:'上传不成功，请重新上传',
                        duration: 3,
                    });
                }
            },
            //上传活动图片
            uploadSuccess3(response){
                if(response.code === 200){
                    this.activityImg = response.data.fileUrl
                    this.infoImg3 = response.data.fileUrl
                    this.activityImgFlag = false
                }else{
                    this.$Notice.warning({
                        title:'证件上传失败',
                        desc:'上传不成功，请重新上传',
                        duration: 3,
                    });
                }
            },
            getCourse(v){
                //线上课程
                this.$router.push({
                    name: 'continuCourseDetail',
                    query: {
                        courseId: v,
                        usercertfiId: this.usercertificateId
                    },
                })
            }
        },
        created() {
            this.getInfo()
        },
        components: {
        }
    }
</script>
